<template>
  <view class="conter" id="id-code-btn">
    <view class="title-textaarea">请输入反馈内容</view>
    <!-- 富文本框 -->
    <view class="textarea-detail-img">
      <textarea 
        maxlength="300"
        class="uni-textarea" 
        v-model="formData.name"
        placeholder="有什么想说的尽情给我留言吧~" 
        placeholder-class="placeholder" 
        :disable-default-padding="true"
        @input="submit"
        />
        <view class="textarea-num"><text>{{remnant}}</text>/300</view>
      <view>
        <view class="img-box">
          <view
            id="lucky"
            class="img-list shape" 
            v-for="(item,index) in goodsImgList" 
            :key="index"
            @longpress="onTouchStart(index,$event)"
          >
            <image  class="img" mode="aspectFill" :src="item"></image>
          </view>
         <view class="detail-img-back" @click="imgUpload(2)" v-if="goodsImgList.length < 9">
            <uni-icons type="plusempty" class="icons-img" color="#C4C4C4" size="50"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <!-- 类型 -->
    <view class="type-class">
      <view class="title">请选择反馈类型</view>
      <view class="class-name-box">
        <view 
          class="item-name" 
          v-for="(item,index) in classList"
          :key="item.id"
          :class="{'classCheckStatus':classCheck.indexOf(index)>-1}"
          @click="clickClass(item,index)"
        >
        {{ item.label }}
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="footer-btn" @click="submitClick">提交</view>
    <!-- 删除弹窗 -->
    <uni-popup ref="popupdelete" type="center">
      <view class="cancel-delete">
        <view class="delete-name">删除</view>
        <view class="hint">确认删除么？</view>
        <view class="postion-btn">
          <view class="btn-experie"  @click="$refs.popupdelete.close()">取消</view>
          <view class="btn-primary" @click="affirmDelete">确认</view>
        </view>
      </view>
    </uni-popup>
    
    
  </view>
</template>

<script>
  export default{
    data() {
      return{
        imgIndex: '', // 图片下标
        classCheck: [],
        classCheckData:[],
        classList: [
          { id: 1, label: '视频动画' }, { id: 2, label: '学习内容' }, { id: 3, label: '实录内容' },
          { id: 4, label: '练习' }, { id: 5, label: '老师点评' }, { id: 6, label: '答题' },
          { id: 7, label: '拓展' }, { id: 8, label: '其他' }
        ],
        remnant: 0, // 记录副本本框字数
        formData: { // 新增视频参数
          vtitle: "", // 视频标题
          coverId: '', // 封面id
          name: "", // 详情
          recommendImgIdList: "", // 详情图片id1,2,3
        },
        goodsImgList: [
          "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_course_resource/homebannerp1.png",
          "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_course_resource/Boutique.jpg",
        ], // 详情里的图片
      }
    },
    onLoad() {
       this.$wechat.unseBehavior()
    },
    methods:{
      // 提交
      submitClick() {
      
      },
      // 删除图片
      affirmDelete() {
        this.goodsImgList.splice(this.imgIndex,1)
        this.$refs.popupdelete.close()
      },
      // 长按
      onTouchStart(index,e) {
        this.imgIndex = index
        this.$refs.popupdelete.open()
      },
      // 多选分类
      clickClass(item,index) {
      	const vm = this
      	const arrIndex = vm.classCheck.indexOf(index)
      	 if(arrIndex > -1){
      		vm.classCheck.splice(arrIndex,1);//取消高亮
      		vm.classCheckData.splice(arrIndex,1)
      	}
        else{
      		 vm.classCheck.push(index)
      		 const arr = JSON.parse(JSON.stringify(item))
      		 const obj = {
      		 	id: arr.id,
      		 	name: arr.label,
      		 }
      		 vm.classCheckData.push(obj) // 尺码添加
      	}
      },
      // 富文本框input事件
      submit() {
      	const vm = this
      	console.log("长度:",vm.formData.name.length)
      	vm.formData.name = vm.formData.name.replace(/\s+/g, "")
      	vm.remnant = vm.formData.name.length
      	if (vm.remnant == 300 || vm.remnant > 300) {
      		vm.remnant = 300
      	}
      }
    }
  }
</script>

<style lang="scss" scoped>
  view{
    // pointer-events:none;
    	-webkit-pointer-events:none;
    	-ms-pointer-events:none;
    	-moz-pointer-events:none;
  }
  .conter{
    padding: 0 40rpx;                         
    .title-textaarea{
      font-size: 28rpx;
      margin: 32rpx 0 14rpx 0;
    }
    .textarea-detail-img {
      border-radius: 4rpx;
      box-sizing: border-box;
      width: 100%;
      background:  #F5F5F5;
      border-radius: 30rpx;
       position: relative;
      // 多行输入框
      .uni-textarea {
        width: 100%;
        padding: 16rpx 16rpx 0 16rpx;
        line-height: 35rpx;
        height: 167rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        border-radius: 30rpx 30rpx 0 0;
        background: #F5F5F5;
        /deep/ .placeholder {
          font-size: 24rpx;
          color: #8C8C8C;
        }
      }
      .textarea-num {
        width: 100rpx;
        font-size: 24rpx;
        text-align: right;
        position: absolute;
        color:  #8C8C8C;
        right: 24rpx;
        bottom: 130rpx;
        .img-box::-webkit-scrollbar {
            display: none; 
          }
      }
      .img-box{
        padding: 14rpx 16rpx 16rpx 16rpx;
        width: 100%;
        display: flex;
        align-items: center;
        overflow-x: auto; 
        overflow-y: hidden;
        display: -webkit-box; 
        -webkit-overflow-scrolling: touch;
        .detail-img-back{
          width: 128rpx;
          height: 128rpx;
          border-radius: 32rpx;
          background-color: #FFFFFF;
          line-height: 128rpx;
          text-align: center;
        }
        .img-list{
          width: 128rpx;
          height: 128rpx;
          margin-right: 16rpx;
          border-radius: 32rpx;
          .img{
            border-radius: 20rpx;
          }
        }
      }
    }
    // 反馈类型
    .type-class{
      margin-top: 48rpx;
      .title{
        font-size: 28rpx;
        margin-bottom: 14rpx;
      }
      .class-name-box{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        font-size: 24rpx;
        color: #595959;
        .classCheckStatus{
          background: #FF800C;
          color: #FFFFFF;
          font-weight: 500;
           border: 2rpx solid #FF800C !important;
        }
        .item-name{
          padding: 0 32rpx;
          height: 56rpx;
          border: 2rpx solid #E5E5E5;
          box-sizing: border-box;
          border-radius: 28rpx;
          text-align: center;
          line-height: 56rpx;
          margin: 0 20rpx 16rpx 0;
        }
        .item-name:nth-child(4n){
          margin-right: 0;
        }
      }
    }
    // 底部按钮
    .footer-btn{
      width: 528rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      color: #FFFFFF;
      border-radius: 44rpx;
      background: #FF800C;
      font-weight: 500;
      letter-spacing: 0.2em;
      position: fixed;
      left: 0;
      bottom: 88rpx;
      right: 0;
      margin: auto;
    }
    // 弹窗样式
    .cancel-delete{
      width: 560rpx;
      height: 320rpx;
      background: #FFFFFF;
      border-radius: 40rpx;
      padding: 32rpx 54rpx 32rpx 54rpx;
      text-align: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #FF800C;
      .hint{
        font-size: 36rpx;
        letter-spacing: 0.2em;
        margin: 42rpx 0 52rpx 0;
      }
      .postion-btn{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .btn-experie,.btn-primary{
        width: 200rpx;
        height: 64rpx;
        text-align: center;
        border-radius: 32rpx;
        line-height: 64rpx;
      }
      .btn-experie{
        border: 2rpx solid #FF800C;
      }
      .btn-primary{
        background: #FF800C;
        color: #FFFFFF;
      }
    }
  }
</style>
